<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="../css/imageView.css"/>
<style type="text/css">
.list-item-t{
	display: flex;
	display: -webkit-flex;
	padding:10px;
	background: rgba(255,255,255,0.9);
	width: 100%;
	height: auto;
	position: relative;
}
.item-t-sl{
	display: block;
	width: 3rem;
	height:3rem;
	background: #ccc;
	border-radius: 10rem;
	overflow: hidden;
}
.item-t-sr{
	-webkit-flex: 1;
	-webkit-box-flex: 1;
	padding: 0 0 0 0.5rem;
	position: relative;
}
.item-t-sr-t{
	font-size: 16px;
	padding: 0.5rem 0 0.5rem 0;
}
.list-item-c{
	font-size:18px;
	padding: 1rem 0 0.5rem 0;
}
#jcontent{
}
.clmentright{
	flex: 1;
	-webkit-flex: 1;
}
.item-t-sr-b{
	font-size:14px;
	color: #999;
}
.newscontents{
	font-size:18px;
	padding:10px;
	line-height:27px;
	color: #000;
	background: #fff;
}
.news_img{
	padding:10px;
	justify-content:space-between;
	-webkit-justify-content: space-between;
	flex-wrap:wrap;
	-webkit-flex-wrap: wrap;
	background: #fff;
	position: relative;
}
.news_imgitem{
	width: 32%;
	height:33%;
}
.item-t-srb-gz{
	font-size: 12px;
}
.itsgz-i{
	padding-bottom: 0.2rem;
}
.news_imgitem{
	width: auto;
	height: auto;
	background:#eee;
	margin-bottom:5px;
	overflow: hidden;
}
.news_imgitem.nullimg{
	background: #fff;
}

.jfooter{
	position: fixed;
	overflow: hidden;
	background: rgba(255,255,255,1);
	width: 100%;
	height:60px;
	bottom: 0;
	left: 0;
	padding: 5px 0 5px 0;
	z-index: 1;
}
#jcontent{
	padding-bottom: 60px;
}
.jfitem{
	width:50%;
	display: block;
	height: auto;
	text-align: center;
	position: relative;
	line-height: 40px;
	color: #555;
}
.itsgz-ic{
	color: orangered;
}
#topimg{
	margin-top: 10px;
}
.comentList{
}
.comentList-title{
	background: #fff;
	height:45px;
	margin-top: 10px;
}
.coment-btn{
	display: block;
	width:80px;
	height: 45px;
	line-height: 45px;
	border-bottom: 2px solid orangered;
	text-align: center;
	margin-left: 10px;
}
#data-list{
	background: #fff;
	margin-top: 10px;
}
.commentitem{
	padding: 15px;
}
.comenticon{
	width: auto;
	height: auto;
}
.myicons{
	display: block;
	width: 40px;
	height: 40px;
	background:#eee;
	border-radius: 40px;
}
.clmentright{
	padding-left: 10px;
	position: relative;
}
.clmentright-t1{
	font-size: 14px;
	color: #000;
}
.clmentright-t2{
	font-size: 12px;
	color: #555;
}
.clmentright-b{
	padding-top: 10px;
	font-size: 16px;
	position: relative;
	padding-bottom: 10px;
}
.detailimg{
	display: block;
	margin-bottom: 5px;
}
.iconr{
	width: 90px;
	height: 60px;
	text-align: center;
}
.iconrtxt{
	font-size: 12px;
	color: #999;
}
.txitx{
	width: auto;
	height: 28px;
	padding: 5px 0 0 0;
	color: orange;
}
.commentinput{
	border: 0;
	border-radius: 0;
	height: 45px;
	margin-left: 10px;
	border-bottom: 1px solid #ddd;
	padding: 0;
}
</style>
</head>
<body>
<div id='jcontent' class="jcontent">
	
</div>

<div class="jfooter line-t jflex">
	<input readonly="readonly" type="text" class="commentinput jf jf1" placeholder="忍不住了，我也说两句"/>
	<div class="iconr  jf jf1">
		<div class="txitx iconfont icon-pinglun"></div>
		<span class="iconrtxt" id="count-1">0</span>
	</div>
	<div class="iconr  jf jf2">
		<div class="txitx iconfont icon-i9"></div>
		<span class="iconrtxt" id="count-2">0</span>
	</div>
	<!--<div class="iconr  jf jf3">
		<div class="txitx  iconfont icon-zhuanfa"></div>
		<span class="iconrtxt" id="count-3">0</span>
	</div>-->
	<!--<a class="jfitem jfitem2 line-r"><i class="iconfont icon-pinglun"></i>评论</a>
	<a class="jfitem jfitem3"><i class="iconfont icon-zhuanfa"></i>转发</a>-->
</div>

<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/page.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var contentId;
mui.plusReady(function(){
	window.setTimeout(function(){
		loadData();
	},360);
});
function loadData(id){
	contentId=webapp.GetQueryString("id");
	//请求数据
	webapp.ajax({
		url:"/carLife/admin/interface/post/selectDetailMessageById?id="+contentId,
		success:function(json){
			document.getElementById("count-1").innerHTML=json.data.commentNum;
			document.getElementById("count-2").innerHTML=json.data.praiseNum;
			//document.getElementById("count-3").innerHTML=json.data.forwardNum;
			json.imgW=(webapp.getScreenW()-30)/3;
			json.imgpath=webapp.config.restUrl;
			var _html=template("detail",json);
			document.getElementById("jcontent").innerHTML=_html;
			mui(document).imageLazyload();
			//
			mui.previewImage();
			//加载评论
			loadUtil.loadList({
				url:"/carLife/common/interface/comment/selectByPage?type=2&targetId="+contentId
			});
			//滚动到底部
			document.addEventListener( "plusscrollbottom",function(){
				loadUtil.scrollBottom();
			}, false );
			_currentWebview=plus.webview.currentWebview();
			//下拉加载最新数据
			_currentWebview.setPullToRefresh(webapp.config.pullRefresh,function(){
				loadUtil.pullToRefresh();
			});
		}
	});
}

mui('.jfooter').on('tap','.jf', function() {
	var _classList=this.classList;
	if(_classList.contains("jf3")){
		//转发
//		var thisId=this.getAttribute("data-id");
//		webapp.openByTpl({
//			title:"动态转发",
//			hrefs:"/tpl/zhuanfa.html?type=2&id="+contentId,
//			ricon:"发布"
//		}); 
		
	}else if(_classList.contains("jf1")){
		//进入评论 
		webapp.openByTpl2({
			title:"帖子评论",
			hrefs:"/tpl/addpinglun2.html?id="+contentId,
			ricon:"发布"
		});
	}else if(_classList.contains("jf2")){
		dianzan(); 
	}
});

/**
 * 点赞
 * @param {Object} ele 被点击的元素
 */
function dianzan(){
	//发送点赞请求
	webapp.ajax({
		url:"/carLife/admin/interface/praise/isOrNotPraise",
		data:{
			targetId:contentId,
			type:2
		},
		success:function(json){		
			if(json.code == 200){
				document.getElementById("count-2").innerHTML = parseInt(document.getElementById("count-2").innerHTML) + 1;
			}else if(json.code == 201){
				document.getElementById("count-2").innerHTML = parseInt(document.getElementById("count-2").innerHTML) - 1;
			}
			
			plus.nativeUI.toast(json.msg);
		}
	});
}

/**
 * 监听搜索事件
 */
window.addEventListener("refreshList", function(event) {
	loadUtil.pullToRefresh();
	if(event.detail.code == '200'){
		document.getElementById("count-1").innerHTML = parseInt(document.getElementById("count-1").innerHTML) + 1;
	}
	window.setTimeout(function(){
		plus.webview.getTopWebview().hide("auto");
	},360);
});
</script>

<script id="detail" type="text/html">
<div id="topimg" class="list-item-t line-b line-t vcenter">
	<a class="item-t-s item-t-sl taped taped-1">
		{{if data.headPortraitMap.path==null}}
		<img src="../img/zw.png" class="img" />
		{{else}}
		<img src="{{imgpath}}{{data.headPortraitMap.path}}-120{{data.headPortraitMap.type}}" class="img"/>
		{{/if}}
	</a>
	<div class="item-t-s item-t-sr">
		<div class="item-t-sr-t">{{data.nickName}}</div>
		<div class="item-t-sr-b">{{dateFormat(data.createTime,"yyyy-MM-dd HH:mm")}}</div>
	</div>
</div>
<div class="newscontents">
	{{data.content}}
</div>
<div class="news_img jflex line-b">
	{{each data.imagesList as imgeItem j}}
	<img class="img detailimg" data-lazyload="{{imgpath}}{{imgeItem.path}}-320{{imgeItem.type}}" src="../img/zw3.png" data-preview-src="{{imgpath}}{{imgeItem.path}}{{imgeItem.type}}" data-preview-group="1"/>
	{{/each}}
</div>

<div class="comentList" name="pinglun">
	<div class="comentList-title"><a class="coment-btn">评论</a></div>
	<div id="data-list"></div>
	<div id="nodatas" class="nodatas">
		<span class="nodatas-icon"><i class="iconfont icon-wjl nodataicons"></i></span>
		<div class="nodata-tip">该信息暂时无评论内容!</div>
	</div>
	<div id="loadingMore"></div>
</div>
</script>

<script  id="tpl-list" type="text/html">
	{{each data as item i}}
		<div class="commentitem jflex list-item" data-id="{{item.id}}">
			<div class="comenticon">
				<a class="myicons">
					{{if item.headPortraitMap.path == null}}
					<img src="../img/zw.png" class="img"/>
					{{else}}
					<img class="img" src="{{imgPath}}{{item.headPortraitMap.path}}{{item.headPortraitMap.type}}" />
					{{/if}}
				</a>
			</div>
			<div class="clmentright">
				<div class="clmentright-t">
					<div class="clmentright-t1">{{item.timeGrade}} 来自 {{item.reallyName}}</div>
					<div class="clmentright-t2">{{dateFormat(item.createTime,"yyyy-MM-dd HH:mm")}}</div>
				</div>
				<div class="clmentright-b  line-b">
					{{item.content}}
				</div>
			</div>
		</div>
	{{/each}}
</script>

</body>
</html>
 